<script setup>
import { ref , onMounted } from 'vue';
import { updateSettings , getSettings } from '@/api';
import { useRouter , useRoute } from 'vue-router';
import { Dialog } from '@varlet/ui';
import '@varlet/ui/es/dialog/style/index.js';
import { Snackbar } from '@varlet/ui'
import '@varlet/ui/es/snackbar/style/index.js';
const router = useRouter();
const $route = useRoute();

const commentSwitch = ref(false);
const commentText = ref('');
// 返回
const goBack = () => {
  router.go(-1);
}
// 载入事件
onMounted(async () => {
  let wxid = $route.params.wxid ?? false;
  if (!wxid || wxid == undefined || wxid =='') {
    return Dialog({
      title: '获取失败！',
      message: '请返回设置？',
      onConfirm: () => {
        return router.go(-1);
      }
    })
  }
  let r = await getSettings(wxid);
  if (r.code != 200) {
    return Dialog({
      title: r.msg,
      message: '请返回设置？',
      onConfirm: () => {
        return router.go(-1);
      }
    })
  }
  console.log($route.params);
  commentSwitch.value = r?.data?.cofig?.friend_comments ?? false;
  commentText.value = r?.data?.cofig?.friend_comments_content ?? '';
})
// 修改配置 
async function UpdateSet() {
  let wxid = $route.params.wxid ?? '';
  if (commentSwitch.value && commentText.value.length <= 0) {
    return Snackbar({
      content: '评论内容不能为空!',
      duration: 1000
    })
  }
  let r = await updateSettings(wxid, {
    friend_comments: commentSwitch.value,
    friend_comments_content: commentText.value
  });
  if (r.code != 200) {
    return Dialog({
      title: '修改失败！',
      message: r.msg,
    })
  }
  return Snackbar({
    content: '修改成功!',
    duration: 3000
  })
}
</script>
<template>
  <var-app-bar title="评论设置" color="#fff" text-color="#000" title-position="center">
    <template #left>
      <var-button
        round
        text
        color="transparent"
        text-color="#000"
        @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>
  <div style="padding-top: 10px;">
    <var-cell title="评论开关">
      <template #extra>
        <var-switch v-model="commentSwitch" />
      </template>
    </var-cell>
  </div>
  <var-divider />
  <div style="padding: 10px;">
    <n-input v-if="commentSwitch"
      v-model:value="commentText"
      type="textarea"
      placeholder="请输入评论内容"
      :autosize="{
        minRows: 5
      }"
    />
    <div style="text-align: center;margin-top: 10px;">
      <var-button text outline type="primary" @click="UpdateSet">保存设置</var-button>
    </div>
  </div>
</template>